<template>
  <div>
    <section class="section-content orders-container">
      <div class="section-container">
        <div class="section-header">
          <h3>我的订单</h3>
        </div>
        <div>
          <div class="tabbar">
            <a-tabs default-active-key="0" @change="aTabsChange($event)">
              <a-tab-pane key="0" tab="全部订单"></a-tab-pane>
              <a-tab-pane key="1" tab="待付款"></a-tab-pane>
              <a-tab-pane key="2" tab="待发货"></a-tab-pane>
              <a-tab-pane key="3" tab="待收货"></a-tab-pane>
              <a-tab-pane key="4" tab="已完成"></a-tab-pane>
              <a-tab-pane key="5" tab="已取消"></a-tab-pane>
            </a-tabs>
          </div>
        </div>
        <div>
          <div class="product-table-header">
            <div class="leading">
              <p class="text-center-p">订单</p>
              <p class="text-center-p">单价</p>
              <p class="text-center-p">数量</p>
            </div>
            <div class="trailing">
              <p class="text-center-p">金额</p>
              <p class="text-center-p">收货人</p>
              <p class="text-center-p">状态</p>
              <p class="text-center-p">操作</p>
            </div>
          </div>
          <div v-for="(item, index) in items" :key="index">
            <goods-orders v-if="item.orderType == 0" :item="item" />
            <libray-orders v-if="item.orderType == 1" :item="item" />
            <industry-orders v-if="item.orderType == 2 || item.orderType == 3 || item.orderType == 4" :item="item" />
          </div>
        </div>
      </div>
      <div class="pagination-container">
        <a-pagination
          background
          layout="prev, pager, next"
          :current="currentPage"
          :page-size="pageSize"
          :total="totalCount"
          @change="paginationOnChange"
        >
        </a-pagination>
      </div>
    </section>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import GoodsOrders from '@/views/order/components/GoodsOrders.vue'
import LibrayOrders from '@/views/order/components/LibraryOrders.vue'
import IndustryOrders from '@/views/order/components/IndustryOrders.vue'

export default {
  name: 'Mine',
  data() {
    return {}
  },

  computed: {
    ...mapState('order', {
      items: (state) => state.items,
      pageSize: (state) => state.pageSize,
      pageTotal: (state) => state.pageTotal,
      totalCount: (state) => state.totalCount,
      currentPage: (state) => state.currentPage,
      originalPage: (state) => state.originalPage,
    }),
  },

  components: {
    GoodsOrders,
    LibrayOrders,
    IndustryOrders,
  },

  mounted() {},

  created() {
    this.updateList()
  },

  methods: {
    ...mapActions('order', ['getParentOrderListAction', 'updateCurrentPageAction', 'updateOriginalPageAction']),

    currentChange() {},

    childOrderClick(childOrderItem) {
      this.$router.push({
        path: '/order/detail',
        query: { orderId: childOrderItem.id },
      })
    },

    aTabsChange(activeKey) {
      this.updateList(activeKey)
    },

    paginationOnChange(value) {
      this.updateCurrentPageAction(value)
      this.updateList()
    },

    updateList(index) {
      const that = this

      const orderStatus = index && index * 1 === 0 ? null : index * 1 - 1
      const parameters = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        orderStatus: orderStatus,
        name: this.searchKeywords,
      }

      const isRefresh = true
      const isPC = true
      this.getParentOrderListAction({ isRefresh, parameters, isPC }).catch((error) => {
        that.$message.error(error.message)
      })
    },
  },
}
</script>

<style scoped lang="less">
h3 {
  padding: 10px 0;
}

.orders-container {
  margin: 40px auto;
  padding: 10px 15px;
  background: white;
}

.product-table-header {
  padding: 0 10px;
  display: grid;
  height: 44px;
  background: var(--r-background-gray);
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-tertiary));
  font-weight: 400;
  grid-template-columns: 60% auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* text-align: center; */
}

.product-table-header .leading {
  display: grid;
  grid-template-columns: auto 80px 80px;
  align-items: center;
}
.product-table-header .trailing {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.order-container .leading {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container .product {
  display: flex;
  flex-direction: column;
  align-items: top;
}
.order-container .product .cell {
  padding: 10px 10px;
  display: grid;
  grid-template-columns: 130px auto 80px 80px;
  /* background: rebeccapurple; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container .product > :last-child {
  border-bottom: 0px;
}

.order-container .trailing {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container .trailing .wrapper {
  padding: 10px 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container {
  display: grid;
  grid-template-columns: 60% auto;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-tertiary));
  font-weight: 400;
}

.parent-order-container {
  margin: 20px 0px;
  padding: 0px 0px;
}

.child-order-header-splitted {
  display: grid;
  grid-template-columns: 12% 25% auto;
  height: 44px;
  align-items: center;
  padding: 0px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 0px;
  border-bottom: 0px;
}

.child-order-header {
  display: grid;
  grid-template-columns: 12% 30% auto;
  height: 44px;
  align-items: center;
  background: var(--r-background-gray);
  padding: 0px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0px;
}
.parent-order-header {
  display: grid;
  grid-template-columns: 12% 25% auto;
  background: var(--r-background-gray);
  height: 44px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0px;
  padding: 0px 20px;
}
.parent-order-status {
  display: grid;
  grid-template-columns: 12% 25% 20% 20% auto;
  background: var(--r-background-gray);
  height: 44px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0px 20px;
}

.product .img {
  margin: 0 10px;
  width: 100px;
  height: 100px;
  background: var(--r-background-gray);
  border-radius: 5px;
}
.product-checkbox-cover {
  display: flex;
  flex-direction: row;
}
.product .a-input-number {
  width: 120px;
}

.product-count-input-container {
  margin-top: -4px;
  display: flex;
  justify-content: center;
}

.product-count-input-container .a-input-number {
  width: 126px;
}

.text-center-p {
  text-align: center;
}

.pagination-container {
  margin: 10px 10px;
}
</style>
